import React from 'react'
const RoomPay = () => {
    let [searchParams] = React.Router.useSearchParams()
    let orderid = searchParams.get('orderid') ? searchParams.get('orderid') : 0
    const [isLoading, setIsLoading] = React.useState(true)
    let [order, SetOrder] = React.useState<object | any>({
    })
    let [notice, SetNotice] = React.useState('付款金额要与显示的金额一致，否则后果自负')
    let [maxtime, SetMax] = React.useState<number | any>(0) //总秒数
    let T1 = React.useRef<any | null>(null);
    let T2 = React.useRef<any | null>(null); //定时器
    React.useEffect(() => {
        OrderData()
    }, [])

    React.useEffect(() => 
    {
        if (maxtime == 60) 
        {
            T1.current = setInterval(() => SetMax((prev: any) => prev - 1), 1000)
            // SetOrder({
            //     ...order,
            //     wxcode: '/assets/pay/images/wx.jpg',
            //     zfbcode: '/assets/pay/images/zfb.jpg',
            // })
        } 
        else if (maxtime == 0) 
        {

            clearInterval(T1.current)
            clearInterval(T2.current)

            SetOrder({
                ...order,
                wxcode: '/assets/pay/images/qrcode_timeout.png',
                zfbcode: '/assets/pay/images/qrcode_timeout.png',
            })

            SetNotice('订单已失效，请手动关闭页面，请重新下单')
        }
    }, [maxtime])

    const OrderData = async () => 
    {
        let data = {
            busid: React.Business.id,
            orderid: orderid
        }
        let result = await React.HTTP.post('/order/info', data)
        if (result.code == 1) 
        {
            SetOrder({
                ...result.data,
                wxcode: '/assets/pay/images/wx.jpg',
                zfbcode: '/assets/pay/images/zfb.jpg',
            })
        }
        else 
        {
            React.error(result.msg)
        }

        let payresult = await React.HTTP.post('/order/pay', {
            orderid:orderid
        })
        if (payresult.code == 1) 
        {
            setIsLoading(false);
        }
        else 
        {
            React.error(result.msg)
        }

        SetMax(60)
        const query = async () => 
        {   
            
        }

        T2.current = setInterval(query, 5000)
    }
    if (!isLoading){
        return (
            <>
                <link rel="stylesheet" href="/assets/pay/pay.module.css"></link>
                <h1 className="mod_title">
                    <span className={order.type == "zfb" ? "ico_log ico-4" : "ico_log ico-3"}></span>
                </h1>

                <div className="mod_ct">
                    <div className="order"></div>

                    <div style={{ marginTop: '10px' }}>
                        <span style={{ color: 'red' }}>提示：{notice}</span>
                    </div>

                    <div className="amount" id="money">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥<span id="copyText" className="amount2">{order.price}</span>元
                        <span style={{ fontSize: '10px', color: 'darkcyan' }}>&nbsp;&nbsp;复制金额</span>
                    </div>

                    <div className="qrcode-img-wrapper">
                        <div className="qrcode-img-area">
                            <div className="ui-loading qrcode-loading" style={{ display: 'none' }}></div>
                            <div style={{ position: 'relative', display: 'inline-block' }}>
                                <img id="imgCode" src={order.type == 'wx' ? order.wxcode : order.zfbcode} style={{ width: '220px' }} />
                            </div>
                        </div>
                    </div>

                    <div className="time_item" style={{ paddingTop: '10px' }}>
                        {/* <div className="time_item" id="msg">
                            <h1 className="time_item">订单名称：<span>{order.name}</span></h1>
                        </div>

                        <div className="time_item">
                            <h1>订单号:<span>{order.code}</span></h1>
                        </div> */}

                        <strong id="hour_show"><s id="h"></s>订单支付有效期</strong>
                        <strong id="second_show">{maxtime}秒</strong>
                        <div className="time_item"></div>
                    </div>

                    <div className="tip">
                        <div className="ico_scan"></div>
                        <div className="tip_text">
                            <p id="showtext">{order.type == 'wx' ? '打开微信[扫一扫]' : '打开支付宝[扫一扫]'}</p>
                        </div>
                    </div>
                </div>
            </>
        )
    }
}

export default RoomPay